<script lang="ts" setup>
const btnBox = ref()
const emits = defineEmits(['parkChange'])
const defaultView = (name, event) => {
  btnBox.value.childNodes.forEach((item) => {
    if (event.target === item.children[0] || event.target === item) {
      window.newThree.defaultView(name)
      if (!item.classList.contains('btnA')) {
        // 清空图标
        item.classList.add("btnA")
        emits('parkChange', name)
        window.newThree.monitoringShow(false)
        window.newThree.weatherSearchShow(false)
        window.newThree.publicResourcesShow(false)
        window.newThree.flyToCompanies(null)
      }

    } else {
      item.classList.remove("btnA")
    }
  })
}
// const closeCarPosPage = () => {
//   document.getElementById('carPosPage').style.display = 'none'
// }
const closeMonitoringPage = () => {
  document.getElementById('monitoringPage').style.display = 'none'
}
const closeCompaniesTagPage = () => {
  document.getElementById('companiesPage').style.display = 'none'
}
const closeWeatherSearchPage = () => {
  document.getElementById('weatherSearchPage').style.display = 'none'
}
let token = ref()
// const get = () => {
//   getVehiclePositionLoginMds().then(res => {
//     // token.value = "https://18gps.net/dealer/?mds=" + res.mds
//     // token.value = "https://18gps.net/"
//     token.value = `https://www.18gps.net//user/playback.html?school_id=44a51620-2be7-4bf6-b4dd-fc6451b4ea0f&mapType=BAIDU&objectid=44a51620-2be7-4bf6-b4dd-fc6451b4ea0f&lang=cn&custid=44a51620-2be7-4bf6-b4dd-fc6451b4ea0f&custname=ccc606ntp875-%E6%98%A5%E5%AA%9B&mds=${res.mds}&loginUrl=https://www.18gps.net/&remote_url=&monitorUrl=https://www.18gps.net/`
//   })
// }
// get()
const displayParkIntroduction = (flag) => {
  if (flag) {
    document.querySelector('#parkPage').style.display = 'block'
  } else {
    document.querySelector('#parkPage').style.display = 'none'
  }
}

</script>

<template>
  <div ref="btnBox" id="box">
    <el-button class="btn" @click="defaultView('三大顷产业园',$event)">三大顷产业园</el-button>
    <el-button class="btn btnA" @click="defaultView('小海子产业园',$event)">小海子产业园</el-button>
    <el-button class="btn" @click="defaultView('七台镇西产业园',$event)">七台镇西产业园</el-button>
    <el-button class="btn" @click="defaultView('七台镇东产业园',$event)">七台镇东产业园</el-button>
  </div>
  <div id="carPosPage">
    <!--    <div class="close" @click="closeCarPosPage">x</div>-->
    <!--    &lt;!&ndash;    <iframe id="my-iframe" name="my-iframe" src="/carPos/a(1).html"></iframe>&ndash;&gt;-->
    <!--    <iframe id="my-iframe" :src="token" name="my-iframe"></iframe>-->
  </div>
  <div id="monitoringPage">
    <div class="close" @click="closeMonitoringPage">x</div>
    <div class="monitoring">
    </div>
  </div>
  <div id="companiesPage">
    <div class="close" @click="closeCompaniesTagPage">x</div>
    <div class="companiesTags">
    </div>
  </div>
  <div id="weatherSearchPage">
    <div class="close" @click="closeWeatherSearchPage">x</div>
    <div class="weatherSearch">
    </div>
  </div>
  <div id="parkPage">
    <div class="close" @click="displayParkIntroduction(false)">x</div>
    <div class="parkTags">
      乌兰察布市辉腾锡勒绿色经济开发区商都产业园总规划面积18.35平方公里，包含七台产业园、三大顷产业园、小海子农牧产业园，目前建成面积约15平方公里，入住企业89家，主导产业为新材料装备制造业和农畜产品加工，其中重点能耗企业19家，规上企业34家，重点环保监测企业11家。
      开发区通过工业园区云平台覆盖和智慧化应用建设，建立“经济运行监测”、“能耗监测”、“安全应急管理”、“环保监测”、“交通物流”、“人力资源管理”和“综合服务”七大模块，实现企业生产、环保、安全、能耗、物流等关键数据的及时采集、传输、存储、分析和智能响应，形成园区安全、便捷、高效、绿色的新型形态，使园区管理服务更高效便捷。
    </div>
  </div>
</template>

<style scoped lang="less">
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}

.example-showcase .el-dropdown-link {
  align-items: center;
  color: var(--el-color-primary);
  cursor: pointer;
  display: flex;
}

#weatherSearchPage {
  background-image: url("@/assets/threeJs/images/companiesPageBac.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 1vh 1vw 1vh 1vw;
  position: fixed;
  top: 0;
  min-width: 15vw;

  .weatherSearch {
    height: 100%;
    width: 100%;
    color: #ffffff;
  }

}

#parkPage {
  background-image: url("@/assets/threeJs/images/companiesPageBac.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  display: none;
  left: 50%;
  padding: 1vh 1vw 1vh 1vw;
  position: fixed;
  top: 50%;
  width: 20vw;
  transform: translate(-50%, -50%);

  .parkTags {
    margin-top: 15px;
    height: 100%;
    width: 100%;
    color: #ffffff;
  }

}

#companiesPage {
  background-image: url("@/assets/threeJs/images/companiesPageBac.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 1vh 1vw 1vh 1vw;
  position: fixed;
  top: 0;
  min-width: 20vw;

  .companiesTags {
    height: 100%;
    width: 100%;
    color: #ccc;
  }

}

#monitoringPage {
  background: rgba(63, 72, 84, 1);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 1vh 1vw 1vh 1vw;
  position: fixed;
  top: 0;
  width: 20vw;
  z-index: 10;

  .monitoring {
    height: 100%;
    width: 100%;
    color: #ffffff;
  }

}

.close {
  color: #cccccc;
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  right: 1%;
  top: 1%;
  z-index: 10;
}

#carPosPage {
  background-color: white;
  display: none;
  height: 50vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 50vw;

  #my-iframe {
    height: 100vh;
    left: -50%;
    position: absolute;
    top: -50%;
    transform: scale(0.5);
    width: 100vw;
  }
}

#box {
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  z-index: 1;

  * {
    pointer-events: auto;
  }

  .btn {
    background-image: url("@/assets/threeJs/images/btn1.png");
    background-size: 100% 100%;
    background-color: transparent;
    border: none;
    color: #ffffff;
    outline: none;

    &&:hover {
      background-image: url("@/assets/threeJs/images/btn1A.png");

    }
  }

  .btnA {
    background-image: url("@/assets/threeJs/images/btn1A.png");
  }
}

</style>
